@layout("/common/_container.html"){
<style>
    .fr{
        float: right;
        margin-right: 5px;
    }
    td input{
        width: 100%
    }
    .form-ahead{
       overflow: hidden;
       margin-bottom: 5px;
    }
    .head-title-h{
        text-align: center;
        margin-bottom: 10px;
    }
    .RecYear-div{
        float:right
    }
    .form-group-block{
    padding: 5px;
    border: 1px solid #ccc
    }
    .addline{
        float:right;
        margin-bottom:10px;
    }
    .delline{
        float:right;
        margin-bottom:10px;
        margin-left:10px;
    }
    .img-formtip img{
       padding-left:30px;
    }
    .help-block{
    color:#a94442
}
li{
    list-style: none;
}
tr.lineborder th:nth-child(7),tr.lineborder th:nth-child(6),tr.lineborder th:nth-child(5),tr.lineborder th:nth-child(4),tr.lineborder th:nth-child(3),tr.lineborder th:nth-child(2),
tr.lineborder th:nth-child(10),tr.lineborder th:nth-child(14),tr.lineborder th:nth-child(18)
{
    border-left: 1px solid #99999969;
}
tr.lineleft td{
    border-left: 1px solid #99999969;
}
    </style>
<div class="row">
    <div class="col-sm-12">
        <div class="head-title-h">
            <h2>节约用水技术措施改造项目年报</h2>
        </div>
        <a href="#" class="btn btn-primary btn-sm delline">
            <span class="glyphicon glyphicon-minus">删除条目</span>
        </a>
        <a href="#" class="btn btn-primary btn-sm addline">
            <span class="glyphicon glyphicon-plus">增加条目</span>
        </a>

        <form class="myform" action="" id="form4">
            <!-- 表头 -->
            <div class="form-ahead">
                <div class="col-sm-4">
                    <label class="col-sm-12 col-form-label" for="UnitHead">填表单位名称（盖章）：</label>
                </div>
                <div class="col-sm-2 RecYear-div">
                    <label for="RecYear" class="col-sm-4 col-form-label" title="必填项"><i style="color:red">*</i>年份：</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control  col-sm-2" name="RecYear" id="RecYear" title=""
                            placeholder="">
                    </div>
                </div>
            </div>
            <form class="" action="">
                <div class="form-group row form-group-block">
                    <div class="col-sm-12">
                        <!-- table1 -->
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">所属节水管理部门</th>
                                    <th scope="col"style="border-left:1px solid #99999969"  title="必填项"><i style="color:red">*</i>项目名称</th>
                                    <th scope="col"style="border-left:1px solid #99999969" title="必填项"><i style="color:red">*</i>用水户名称</th>
                                    <th scope="col"style="border-left:1px solid #99999969" title="必填项"><i style="color:red">*</i>取水用途</th>
                                    <th scope="col"style="border-left:1px solid #99999969" title="必填项"><i style="color:red">*</i>项目类型（互异）</th>
                                    <th scope="col"style="border-left:1px solid #99999969" title="必填项"><i style="color:red">*</i>建设地址</th>
                                    <th scope="col" style="border-left:1px solid #99999969"></th>
                                    <th scope="col">建设情况</th>
                                    <th scope="col"></th>
                                    <th scope="col" style="border-left:1px solid #99999969">总投资（万元）</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col" style="border-left:1px solid #99999969">规模</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"style="border-left:1px solid #99999969">效益情况（万立方米）</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                </tr>
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col" title="格式：YYYY-MM-DD" title="必填项" style="border-left:1px solid #99999969"><i style="color:red">*</i>开工时间</th>
                                    <th scope="col" title="格式：YYYY-MM-DD" title="必填项"><i style="color:red">*</i>竣工时间</th>
                                    <th scope="col" title="必填项"><i style="color:red">*</i>建设情况</th>
                                    <th scope="col"style="border-left:1px solid #99999969"  title="必填项"><i style="color:red">*</i>合计</th>
                                    <th scope="col">补助资金</th>
                                    <th scope="col">自筹资金</th>
                                    <th scope="col">其他来源</th>
                                    <th scope="col"style="border-left:1px solid #99999969"title="必填项"><i style="color:red">*</i>合计</th>
                                    <th scope="col">雨水利用</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col" style="border-left:1px solid #99999969" title="必填项"><i style="color:red">*</i>年节水量</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                </tr>
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col">蓄水池（立方米）</th>
                                    <th scope="col">透水砖（平方米）</th>
                                    <th scope="col">下凹式绿地（平方米）</th>
                                    <th scope="col"style="border-left:1px solid #99999969"></th>
                                    <th scope="col">自来水</th>
                                    <th scope="col">自备水</th>
                                    <th scope="col">地表水</th>

                                </tr>
                                <tr class="line-tr3 lineborder">
                                </tr>
                            </thead>
                            <tbody class="tbody-aplus">

                                <br>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="UnitHead" title="必填项"><i style="color:red">*</i>单位负责人：</label>
                    <div class="col-sm-8">
                        <input type="text" name="UnitHead" id="UnitHead" value="">
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="Operater"  title="可在“个人资料”进行修改">填表人：</label>
                    <div class="col-sm-8">
                        <input type="text" name="Operater" id="Operater" value="${Operater}" title="可在“个人资料”进行修改" placeholder=""
                            disabled="disabled">
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="Phone"  title="可在“个人资料”进行修改">联系电话：</label>
                    <div class="col-sm-8">
                        <input type="text" name="phone" id="Phone" value="${phone}" value="" title="可在“个人资料”进行修改"
                            placeholder="" disabled="disabled">
                    </div>
                </div>
                <div class="col-sm-3">
                    <label class="col-sm-4 col-form-label" for="ts">报出日期：</label>
                    <div class="col-sm-8">
                        <input type="text" name="ts" id="Ts" value="${Ts}" placeholder="" disabled="disabled">
                    </div>
                </div>
            </form>
            </br>
            </br>
            </br>
            </br>
            <button type="button" id="saveform" class="btn btn-primary fr">保存</button>
            <button type="button" id="exportform" class="btn btn-primary fr">导出</button>
            <button type="button" id="preview" class="btn btn-primary fr">预览</button>
            <a id='export_a' href=''></a>
    </div>
    <div>

        <ul>
            <li><strong>说明：</strong></li>
            <li>1.统计范围：各区节约用水技术措施改造项目用水单位。</li>
            <li>2.报送单位：用水单位及市、区各节水管理部门。</li>
            <li>3.报送时间及报送形式：用水单位每年1月30日前报送所属区节水管理部门，各区节水管理部门2月10日前汇总后报送市节水办。</li>
        </ul>
        <br>
        <br>
        <ul>
            <li><strong>指标解释：</strong></li>
            <li>1.节水技措项目指采用先进技术和生产工艺，提高用水效率的技术改造项目。</li>
            <li>2.项目类型分别为中水利用、器具改造、雨水利用、冷凝水回收、工艺改造、循环水改造、节水灌溉、污水回用、管网改造、透水砖铺设、其他类型。其中“雨水利用”项目类型分为“蓄水池、透水砖及下凹式绿地”。</li>
            <li>3.取水用途分为工业、公共服务、城镇环境、城镇居民、农村居民、农村生态、农业。</li>
            <li>4.建设情况分为开工未竣工、开工并竣工、续建并竣工、续建未竣工、已建。</li>
            <li>5.规模指报告期内改造单项工程的设计能力（或工程效益），例如：建筑中水设施规模的单位是“立方米/日”；建设绿地微喷项目的规模是“平方米”。其中“雨水利用”项目规模：“蓄水池”容积为“立方米”。
                透水砖面积为“平方米”；下凹式绿地面积为“平方米”；器具改造规模按水龙头套件数，便器水箱套件数，淋浴器套件数分别填报，单位为“套”。</li>
            <li>6.节水量指采用先进节水技术措施后，较采用措施前所节约的水量，每项措施“节水量”计算期为一年。以竣工验收所在月份开始计算。铺设透水地砖列入节水措施，不计节水量。
                节水量=新装节水型水龙头个数*单位节水型水龙头节水量+新装节水型便器水箱个数*单位节水型便器水箱节水量+新装节水型淋浴器个数*单位节水型淋浴器节水量。</li>
            <li>(1)单位水龙头节水量:1.9立方米/个.年(2)单位便器水箱节水量7.56立方米/套.年(3)单位淋浴器节水量7.56立方米/个.年。</li>
        </ul>
    </div>
</div>

<script>
      $(document).keydown(function(event){
          switch(event.keyCode){
             case 13:return false; 
             }
      });
    var linetr3Arr = ["甲", "乙", "丙", "丁", "戌", "己", "庚", "辛", "壬",
        "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
    ]
    var linetrName = ["Management", "PrjName", "UnitName", "UseType", "PrjType", "PrjPlace", "StarTime", "EndTime",
        "PrjStatus", "SumFund",
        "SubsidyFund", "SelfFund", "OtherFund", "OtherScale", "ReservoirVolume", "BrickArea", "GreenlandArea",
        "SumSave", "SupplyWater", "SelfProvide", "SurfaceWater",
    ]
    var linetr3Str = ""
    var linetr3Input = ""
    for (var i in linetr3Arr) {
        linetr3Str = linetr3Str + '<th scope="col">' + linetr3Arr[i] + '</th>'
        linetr3Input = linetr3Input + '<td><input name="' + linetrName[i] + '"></td>'
    }
    $(".line-tr3").append(linetr3Str)

    //saveform
    //定义serializeObject方法，序列化表单
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
    //校验
    $("#form4").bootstrapValidator({
        live: 'enabled', //验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
        excluded: [':disabled', ':hidden', ':not(:visible)'], //排除无需验证的控件，比如被禁用的或者被隐藏的
        fields: {
            RecYear: {
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },
                    regexp: { //正则验证
                        regexp: /^\d{4}$/,
                        message: '请输入四位纯数字'
                    }
                }
            },
            UnitHead: {
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },
                    stringLength: { //检测长度
                        min: 0,
                        max: 10,
                        message: '字符长度必须在0-10之间'
                    },
                }
            },
            Reporter: {
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项'
                    },
                    regexp: { //正则验证
                        regexp: /^[0-9]*$/,
                        message: '请输入纯数字'
                    },
                    stringLength: { //检测长度
                        min: 0,
                        max: 10,
                        message: '字符长度必须在0-10之间'
                    },
                }
            },
            UnitName: {
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项-用水户名'
                    },
                    stringLength: { //检测长度
                        min: 0,
                        max: 50,
                        message: '字符长度必须在0-50之间'
                    },
                }
            },
            PrjName: {
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项-项目名称'
                    },
                    stringLength: { //检测长度
                        min: 0,
                        max: 50,
                        message: '字符长度必须在0-50之间'
                    },
                }
            },
            UseType: {
                validators: {
                    regexp: { //正则验证
                        regexp: /^[0-9]*$/,
                        message: '请对照表（取水用途代码表）[0-9]'

                    },
                }
            },
            PrjType: {
                validators: {
                    regexp: { //正则验证
                        regexp: /^[0-19]*$/,
                        message: '请对照表（项目类型代码表）输入数字0-19'
                    },
                }
            },
            PrjStatus: {
                validators: {
                    regexp: { //正则验证
                        regexp: /^[0-19]*$/,
                        message: '请对照表（建设情况代码表）输入数字0-19'
                    },
                }
            },
            PrjPlace:{
                validators: {
                    notEmpty: { //检测非空,radio也可用
                        message: '必填项-项目名称'
                    },
                    stringLength: { //检测长度
                        min: 0,
                        max: 50,
                        message: '字符长度必须在0-50之间'
                    },
                }
            },
            StarTime:{
                validators: {
                    notEmpty: { //检测非空
                        message: '必填项'
                    }
                }
            },
            EndTime:{
                validators: {
                    notEmpty: { //检测非空
                        message: '必填项'
                    }
                }
            },
            SumFund:{
                validators: {
                    notEmpty: { //检测非空
                        message: '必填项'
                    }
                }
            },
        }
    })
    //exportform 导出
    $(document).on("click", "#exportform", function () {
        $("#export_a").attr("href", Feng.ctxPath + '/techchange/dlExcell')
        $("#export_a")[0].click()
    })
    $("#saveform").click(function () { //非submit按钮点击后进行验证，如果是submit则无需此句直接验证
        $("#form4").bootstrapValidator('validate'); //提交验证
        if ($("#form4").data('bootstrapValidator').isValid()) { //获取验证结果，如果成功，执行下面代码
            var form = $(".myform").serializeObject();
            console.log(form)
            var formcorrect = []
            formlenth = countline
            for (var i = 0; i < countline; i++) {
                if (countline == 1) {
                    formcorrect.push({
                        Management: form["Management"],
                        PrjName: form["PrjName"],
                        UnitName: form["UnitName"],
                        UseType: form["UseType"],
                        PrjType: form["PrjType"],
                        PrjPlace: form["PrjPlace"],
                        StarTime: form["StarTime"],
                        EndTime: form["EndTime"],
                        PrjStatus: form["PrjStatus"],
                        SelfFund: form["SelfFund"],
                        SumFund: form["SumFund"],
                        OtherFund: form["OtherFund"],
                        OtherScale: form["OtherScale"],
                        ReservoirVolume: form["ReservoirVolume"],
                        BrickArea: form["BrickArea"],
                        GreenlandArea: form["GreenlandArea"],
                        SumSave: form["SumSave"],
                        SupplyWater: form["SupplyWater"],
                        SelfProvide: form["SelfProvide"],
                        SurfaceWater: form["SurfaceWater"],
                        SubsidyFund: form["SubsidyFund"],
                        RecYear: form["RecYear"],
                        UnitHead: form["UnitHead"],
                    })
                } else {
                    formcorrect.push({
                        Management: form["Management"][i],
                        PrjName: form["PrjName"][i],
                        UnitName: form["UnitName"][i],
                        UseType: form["UseType"][i],
                        PrjType: form["PrjType"][i],
                        PrjPlace: form["PrjPlace"][i],
                        StarTime: form["StarTime"][i],
                        EndTime: form["EndTime"][i],
                        PrjStatus: form["PrjStatus"][i],
                        SelfFund: form["SelfFund"][i],
                        SumFund: form["SumFund"][i],
                        OtherFund: form["OtherFund"][i],
                        OtherScale: form["OtherScale"][i],
                        ReservoirVolume: form["ReservoirVolume"][i],
                        BrickArea: form["BrickArea"][i],
                        GreenlandArea: form["GreenlandArea"][i],
                        SumSave: form["SumSave"][i],
                        SupplyWater: form["SupplyWater"][i],
                        SelfProvide: form["SelfProvide"][i],
                        SurfaceWater: form["SurfaceWater"][i],
                        SubsidyFund: form["SubsidyFund"][i],
                        RecYear: form["RecYear"],
                        UnitHead: form["UnitHead"],
                    })
                }
            }
            console.log(formcorrect)

            var ajax = new $ax(Feng.ctxPath + '/techchange/pushMsg', function (data) {
                if (data.code == 200) {
                    Feng.success(data.msg);
                } else {
                    Feng.error(data.msg);
                }

            }, function (data) {
                Feng.error("请求失败!");
            });
            ajax.set("json", JSON.stringify(formcorrect));
            ajax.start();


        } else{
            //解决table校验提示重复问题
            Feng.error("表单有漏填或填写格式错误");//获取验证结果，失败
        }
    });
    //预览
    $(document).on("click", "#preview", function () {
        window.open(Feng.ctxPath + '/techchange/showPDF', "_blank",
            "top=200,left=200,height=600,width=800,status=yes,toolbar=1,menubar=no,location=no,scrollbars=yes"
        );
    })
</script>
<script src="${ctxPath}/static/modular/fsjs/techchange/techchange.js"></script>
<script>
    //返回的数据data
    var dataLength
    var daterecive
    var ajax = new $ax(Feng.ctxPath + '/techchange/getTemp', function (data) {
        console.log(data)
        dataLength = data.length
        daterecive = data
    }, function (data) {
        // Feng.error("请求失败!" + data.responseJSON.message + "!");
    });
    ajax.start();


    //addline 增加条目
    if (typeof (dataLength) == "undefined") {
        dataLength = 1
    }
    var countline = dataLength

    appendline() //init
    //appendline
    function appendline() {
        for (var i = 0; i < countline; i++) {
            $(".tbody-aplus").append('<tr class="totalcount lineleft" index="' + i + '"></tr>')
        }
        $(".totalcount").append(linetr3Input)
    }

    $(".addline").click(function () {
        countline++;
        $(".tbody-aplus").append('<tr class="totalcount lineleft" index="' + countline + '"></tr>') //增加totalcount
        $(".totalcount:last").append(linetr3Input) //字符串行
        console.log(linetr3Input)
        console.log(countline)
        dropdownList(1)
        $("select[name=UseType]:last").attr("value", "1") //select初始value值
        $("select[name=PrjType]:last").attr("value", "1") //select初始value值

    })
    //delline 删除条目
    $(".delline").click(function () {
        countline--;
        $(".totalcount:last").remove();
        console.log(countline)
    })

    dropdownList() //init
    function dropdownList(type) {
        //input 显示下拉选择项
        optArr1 = ["工业", "公共服务", "成长环境", "城镇居民", "农村居民", "农村生态", "农业"]
        optArr2 = ["中水利用", "器具改造", "雨水利用", "冷凝水回收", "工艺改造", "循环水改造", "节水灌溉", "节水灌溉", "污水回用", "管网改造", "透水砖铺设", "其他类型"]
        optArr3 = ["开工未竣工", "开工竣工", "续建竣工", "续建未竣工", "已建"]
        var optStr1 = ""
        for (var i in optArr1) {
            i *= 1
            optStr1 = optStr1 + '<option value="' + (i + 1) + '">' + optArr1[i] + '</option>'
        }

        var optStr2 = ""
        for (var i in optArr2) {
            i *= 1
            optStr2 = optStr2 + '<option value="' + (i + 1) + '">' + optArr2[i] + '</option>'
        }
        var optStr3 = ""
        for (var i in optArr3) {
            i *= 1
            optStr3 = optStr3 + '<option value="' + (i + 1) + '">' + optArr3[i] + '</option>'
        }
        $(".totalcount").each(function (index) {
            if (type == 1) { //增加
                $($(".totalcount:last").children("td")[3]).html('<select style="width:100%" name="UseType">' +
                    optStr1 +
                    '</select>')
                $($(".totalcount:last").children("td")[4]).html('<select style="width:100%" name="PrjType">' +
                    optStr2 +
                    '</select>')
                $($(".totalcount:last").children("td")[8]).html('<select style="width:100%" name="PrjStatus">' +
                    optStr3 +
                    '</select>')
            } else { //初始
                $($(this).children("td")[3]).html('<select style="width:100%" name="UseType">' + optStr1 +
                    '</select>')
                $($(this).children("td")[4]).html('<select style="width:100%" name="PrjType">' + optStr2 +
                    '</select>')
                $($(this).children("td")[8]).html('<select style="width:100%" name="PrjStatus">' + optStr3 +
                    '</select>')
            }
        })
        //change select
        //selectChangeValue()
    }
    //数据填充
    var returnObjArr = []

    for (var i in daterecive[0]) {
        returnObjArr.push(i) //首字母是小写
    }
    console.log($(".totalcount"))
    for (var i in returnObjArr) {
        var currentObj = returnObjArr[i]
        currentObj_A = currentObj.replace(currentObj[0], currentObj[0].toUpperCase()); //首字母小写转大写

        for (var j in daterecive) { //显示值
            $($('input[name=' + currentObj_A + ']')[j]).attr('value', daterecive[j][currentObj]);
        }

    }
    selectChangeValue() //init change
    function selectChangeValue() {
        //selector 值的返回
        var selectorPrjType = []
        var selectorUseType = []
        var selectorPrjStatus = []

        for (var i in daterecive) {
            selectorPrjType.push(daterecive[i].prjType)
            selectorUseType.push(daterecive[i].useType)
            selectorPrjStatus.push(daterecive[i].prjStatus)
        }

        $("select[name=PrjType]").each(function (i) {
            selectorPrjType_bingo = selectorPrjType[i].replace(/\s*/g, "")
            $(this).val(selectorPrjType_bingo)
        })
        $("select[name=UseType]").each(function (i) {
            selectorUseType_bingo = selectorUseType[i].replace(/\s*/g, "")
            $(this).val(selectorUseType_bingo)
        })
        $("select[name=PrjStatus]").each(function (i) {
            selectorPrjStatus_bingo = selectorPrjStatus[i].replace(/\s*/g, "")
            $(this).val(selectorPrjStatus_bingo)
        })
    }
    //td hover 
    $(document).on("mouseover","tr",index=>{
        $(this).css("background","#ffff000f")
    })
</script>
@}